package app.delish.discover.ui

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import app.delish.discover.R
import app.delish.compose.ui.AsyncImage
import com.elbehiry.model.CuisineItem

/**
 * wenlong 首页 第三部分
 */
// 菜系展示组件：显示可点击的菜系分类列表
@Composable
fun HomeCuisines(
    cuisines: List<CuisineItem>,           // 菜系数据列表
    onCuisineSearch: (String) -> Unit      // 菜系点击回调（触发搜索）
) {
    // 仅在菜系数据非空时显示
    if (cuisines.isNotEmpty()) {
        // 垂直布局容器（深灰色背景）
        Column(
            modifier = Modifier.background(color = Color.DarkGray)
        ) {
            // 分类标题文本
            Text(
                text = stringResource(id = R.string.cuisines_you_looking),  // 使用资源文件中的字符串
                style = MaterialTheme.typography.h6,  // 主题定义的标题样式
                textAlign = TextAlign.Center,         // 居中对齐
                modifier = Modifier
                    .padding(16.dp)           // 周边内边距
                    .fillMaxWidth()            // 占满宽度
            )

            // 菜系列表组件
            CuisinesList(cuisines, onCuisineSearch)
        }
    }
}

// 菜系横向滚动列表
@Composable
fun CuisinesList(
    cuisines: List<CuisineItem>,          // 菜系数据
    onCuisineSearch: (String) -> Unit     // 点击回调传递
) {
    // 水平懒加载列表（支持高效渲染大量项）
    LazyRow(
        // 内容内边距：左右+上下
        contentPadding = PaddingValues(
            start = 8.dp,
            top = 8.dp,
            end = 16.dp,   // 右端留更多空间（为滚动指示）
            bottom = 16.dp
        )
    ) {
        // 为每个菜系项创建可组合项
        items(cuisines) { cuisine ->
            CuisineItem(cuisine, onCuisineSearch)
        }
    }
}

// 单个菜系显示项
@Composable
fun CuisineItem(
    item: CuisineItem,                    // 单个菜系数据
    onCuisineSearch: (String) -> Unit     // 点击触发搜索
) {
    // 可交互表面（带阴影+圆角）
    Surface(
        modifier = Modifier
            .requiredSize(180.dp, 180.dp)  // 固定尺寸（正方形）
            .padding(8.dp)                // 项间间距
            .clickable {                  // 点击事件
                onCuisineSearch(item.title)  // 点击时传递菜系名称
            },
        elevation = 8.dp,      // 阴影高度
        shape = RoundedCornerShape(8.dp)  // 圆角半径
    ) {
        // 内部垂直布局
        Column(
            modifier = Modifier
                .fillMaxSize()  // 占满Surface区域
                // 从数据获取背景色（十六进制字符串转Color）
                .background(Color(android.graphics.Color.parseColor(item.color)))
        ) {
            // 异步加载图片
            AsyncImage(
                model = item.image,  // 图片URL
                requestBuilder = { crossfade(true) },  // 启用淡入淡出动画
                contentDescription = "Cuisine image",  // 无障碍描述
                modifier = Modifier
                    .padding(8.dp)  // 图片内边距
                    .requiredSize(100.dp)  // 固定尺寸
                    .align(Alignment.CenterHorizontally),  // 水平居中
                contentScale = ContentScale.Crop  // 裁剪模式（保持比例）
            )

            // 菜系名称文本
            Text(
                text = item.title,                // 显示名称
                style = MaterialTheme.typography.body2,  // 小号正文样式
                maxLines = 1,                     // 单行显示
                color = Color.White,              // 白色文字
                textAlign = TextAlign.Center,     // 居中对齐
                modifier = Modifier
                    .padding(start = 4.dp)  // 左侧微调
                    .fillMaxWidth()          // 占满宽度
            )
        }
    }
}

@ExperimentalFoundationApi
@Composable
@Preview
fun HomeCuisinesList() {
    HomeCuisines(
        listOf(CuisineItem(
           "httpasdfasdf",
            "hello",
        "red"
    ),CuisineItem(
            "httpasdfasdf",
            "hello",
            "red"
        ),CuisineItem(
            "httpasdfasdf",
            "hello",
            "red"
        ))
    ) {}
}